<!DOCTYPE html>
<html lang="en">
	<head>
		<title>你好城 Nihao City</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body scroll="no">
		<div id="container"></div>
		<div id="iRecorder"></div>
		<div id="info" class="topBar">
			<div id="goback" class="goback"><<</div>
			<div id="wallet" class="part h1"> 💳 100</div>
			<div id="energy" class="part h2"> 💪 1000</div>
			<div id="money" class="part h3"> 💰 0</div>
			<div id="honor" class="part h4"> 🏅 0</div>
		</div>

		<script type="text/javascript" src="https://nihaotest.smwho.cn/scripts/Howl.js"></script>
		<script src="https://nihaotest.smwho.cn/scripts/recorder-core.js"></script>
		<script type="importmap">
			{
				"imports": {
					"three": "https://nihaotest.smwho.cn/three/build/three.module.js",
					"three/addons/": "https://nihaotest.smwho.cn/three/jsm/",
					"scripts/": "https://nihaotest.smwho.cn/scripts/"
				}
			}
		</script>

		<script type="module">
			const width = document.documentElement.clientWidth;
			const height = document.documentElement.clientHeight;
			let orientation = window.orientation;
			var screen_width = width; //屏幕宽度
			const contentDOM = document.getElementById('container');
			if (width < height) {
				screen_width = height;
				contentDOM.style.width = height + 'px';
				contentDOM.style.height = width + 'px';
				contentDOM.style.top = (height - width) / 2 + 'px';
				contentDOM.style.left = 0 - (height - width) / 2 + 'px';
				contentDOM.style.transform = 'rotate(90deg)';
			}
			//根据手机旋转的角度来判断
			const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //旋转事件
			window.addEventListener(evt, function () { //事件监听
				if (window.orientation != orientation){
					orientation = window.orientation;
					if (window.orientation === 90 || window.orientation === -90) { 
						//旋转到 90 或 -90 度，即竖屏到横屏
						screen_width = height; //横屏
						contentDOM.style.width = height + 'px';
						contentDOM.style.height = width + 'px';
						contentDOM.style.top = '0px';
						contentDOM.style.left = '0px';
						contentDOM.style.transform = 'none'; //不旋转；
					}else{ 
						//旋转到 180 或 0 度，即横屏到竖屏
						screen_width = height; //竖屏
						contentDOM.style.width = height + 'px';
						contentDOM.style.height = width + 'px';
						contentDOM.style.top = (height - width) / 2 + 'px';
						contentDOM.style.left = 0 - (height - width) / 2 + 'px';
						contentDOM.style.transform = 'rotate(90deg)'; //旋转90度
					}
				}
			}, false);
			Array.prototype.indexOf = function (val) {
			    for (var i = 0; i < this.length; i++) {
			        if (this[i] == val) return i;
			    }
			    return -1;
			};
			Array.prototype.remove = function (val) {
			    var index = this.indexOf(val);
			    if (index > -1) {
			        this.splice(index, 1);
			    }
			};			
			import {City} from 'scripts/city.js';
			new City();
		</script>

	</body>
</html>
